<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>

    <div class="main">
      <div class="left">
        <div class="box-tit" data-v-6e92ad55="">
          <span data-v-6e92ad55="">广场喷泉系统——图片</span>
        </div>
        <img src="../../../assets/img/12121.png" alt="404" />
      </div>

      <div class="right">
        <div class="box-tit" data-v-6e92ad55="">
          <span data-v-6e92ad55="">运行参数</span>
        </div>

        <div class="bei">
          <el-table class="exporttable" :data="tableData" height="240" style="width: 100%" :cell-style="cellStyle" :header-cell-style="{
              'text-align': 'center',
              borderColor: '#1b2c4f',
            }">
            <el-table-th aria-label="adiefeijf">dgergd</el-table-th>
            <el-table-column prop="id" label="北区" />
            <el-table-column prop="date" label="泵运行状态" />
            <el-table-column prop="name" label="泵手/自动" />
            <el-table-column prop="address" label="泵故障报警" />
          </el-table>
        </div>
        <div class="mid">
          <el-table class="exporttable" :cell-style="cellStyle" :header-cell-style="{
              'text-align': 'center',
              borderColor: '#1b2c4f',
            }" :data="tableData" height="240" style="width: 100%; margin-top: 2rem; text-align: center">
            <el-table-column prop="id" label="中区" width="180" />
            <el-table-column prop="date" label="泵运行状态" width="180" />
            <el-table-column prop="name" label="泵手/自动" width="180" />
            <el-table-column prop="address" label="泵故障报警" />
          </el-table>
        </div>

        <el-table class="exporttable" :cell-style="cellStyle" :header-cell-style="{
            'text-align': 'center',
            borderColor: '#1b2c4f',
          }" :data="tableData" height="240" style="width: 100%; margin-top: 2rem; text-align: center">
          <el-table-column prop="id" label="南区" width="180" />
          <el-table-column prop="date" label="泵运行状态" width="180" />
          <el-table-column prop="name" label="泵手/自动" width="180" />
          <el-table-column prop="address" label="泵故障报警" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  components: {
    Header,
  },
  data() {
    return {
      title: "设备监控—广场喷泉系统",
      tableData: [
        {
          id: "1",
          date: "off",
          name: "手动",
          address: "正常",
        },
        {
          id: "2",
          date: "off",
          name: "手动",
          address: "正常",
        },
        {
          id: "3",
          date: "off",
          name: "手动",
          address: "正常",
        },
        {
          id: "4",
          date: "off",
          name: "手动",
          address: "正常",
        },
        {
          id: "5",
          date: "off",
          name: "手动",
          address: "正常",
        },
        {
          id: "6",
          date: "off",
          name: "手动",
          address: "正常",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return " border-color:#5390eb!important; color:#53c8eb!important; padding:0px!important; height:3rem!important; text-align:center";
    },
  },
};
</script>


<style lang='less' scoped >
.bg {
  text-align: center;
}

.box-tit[data-v-6e92ad55] {
  height: 40px;
  line-height: 29px;
  width: 100%;
  font-size: 14px;
  color: #b8f9ff;
  padding-left: 39px;
  background: url()
    no-repeat;
  box-sizing: border-box;
  display: flex;
}
.box-tit[data-v-6e92ad55] span {
  margin-right: 200px;
}
.main {
  margin-top: 2rem;
  height: 80%;
  width: 100%;
  // background-color: white;
  .left {
    width: 40%;
    height: 90%;
    float: left;
    img {
      margin-top: 2rem;
      margin-left: 3rem;
    }
  }
  .right {
    width: 40%;
    height: 90%;
    float: right;
    margin-right: 5rem;
    // background-color: #53c8eb;
  }
}
.el-table::before {
  height: 0;
}
.el-table--border::after,
.el-table--group::after {
  width: 0px;
  height: 0px;
}
.exporttable {
  border: solid 4px #1b2c4f;
  margin: 2rem auto;
}
</style>